<template>
    <a-modal :title="title" :open="open" @update:open="handleOpenChange" width="80%" :footer="null"
        :destroyOnClose="true" :centered="true">
        <a-collapse v-model:activeKey="activeKeys" :bordered="false">
            <a-collapse-panel key="1" header="流程图">
                <WorkflowView :bpmnXml="bpmnXml" :taskList="viewerList" style="height: 30vh" />
            </a-collapse-panel>
            <a-collapse-panel key="2" header="流程信息">
                <div style="max-height: 50vh; overflow-y: auto; overflow-x: hidden;">
                    <a-row :gutter="16" justify="center">
                        <a-col :span="16">
                            <div class="block">
                                <a-timeline>
                                    <a-timeline-item 
                                        v-for="(item, index) in flowRecordList" 
                                        :key="index"
                                        :color="setColor(item.finishTime)"
                                    >
                                        <p style="font-weight: 700">{{item.taskName}}</p>
                                        <a-card :bodyStyle="{ padding: '10px' }">
                                            <a-descriptions :column="1" size="small" bordered>
                                                <a-descriptions-item label="接收时间">
                                                    <template #label><CalendarOutlined /> 接收时间</template>
                                                    {{item.createTime}}
                                                </a-descriptions-item>
                                                <a-descriptions-item v-if="item.finishTime" label="处理时间">
                                                    <template #label><CalendarOutlined /> 处理时间</template>
                                                    {{item.finishTime}}
                                                </a-descriptions-item>
                                                <a-descriptions-item v-if="item.duration" label="耗时">
                                                    <template #label><ClockCircleOutlined /> 耗时</template>
                                                    {{item.duration}}
                                                </a-descriptions-item>
                                                <a-descriptions-item v-if="item.comment" label="处理意见">
                                                    <template #label><FileTextOutlined /> 处理意见</template>
                                                    {{item.comment.comment}}
                                                </a-descriptions-item>
                                            </a-descriptions>
                                        </a-card>
                                    </a-timeline-item>
                                </a-timeline>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </a-collapse-panel>
        </a-collapse>
    </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue';
import {
    CalendarOutlined,
    ClockCircleOutlined,
    FileTextOutlined
} from '@ant-design/icons-vue';
import WorkflowView from "/@/components/business/flowable/bpmn/view.vue";
import { deployApi } from "/@/api/business/flowable/deploy";
import { flowTaskApi } from "/@/api/business/flowable/task";
import InitBPMNXml from '/@/assets/bpmn/empty.bpmn20.xml?raw';
import { smartSentry } from '/@/lib/smart-sentry';

const props = defineProps({
    title: {
        type: String,
        default: '流程图'
    },
    open: {
        type: Boolean,
        default: false
    },
    deployId: {
        type: String,
        required: true
    },
    procInsId: {
        type: String,
        required: true
    }
});

const emit = defineEmits(['update:open']);

const activeKeys = ref(['1']); // 默认只展开第一个面板（流程图）
const bpmnXml = ref('');
const viewerList = ref([]);
const flowRecordList = ref([]);

// 处理 open 状态变化
function handleOpenChange(value) {
    emit('update:open', value);
}

// 设置时间线颜色
function setColor(finishTime) {
    return finishTime ? 'green' : 'blue';
}

// 加载流程数据
async function loadProcessData() {
    try {
        // 获取流程记录
        let flowRecord = await flowTaskApi.getRecord(props.procInsId);
        flowRecordList.value = flowRecord.data;

        // 获取 BPMN XML
        let deploy = await deployApi.getBpmnXml(props.deployId);
        if (deploy.data && deploy.data !== '') {
            bpmnXml.value = deploy.data.replaceAll('\\"', '"').replaceAll('\\n', '');
        } else {
            bpmnXml.value = InitBPMNXml;
        }

        // 获取查看者列表
        let taskResp = await flowTaskApi.getViewer(props.procInsId);
        viewerList.value = taskResp.data;
    } catch (e) {
        smartSentry.captureError(e);
    }
}

// 监听 open 状态，当打开时加载数据
watch(() => props.open, (newVal) => {
    if (newVal) {
        // 重置展开状态
        activeKeys.value = ['1'];
        // 加载数据
        loadProcessData();
    }
});
</script>

<style scoped>
/* 自定义滚动条样式 */
:deep(.ant-collapse-content-box) {
    padding: 0 !important;
}

:deep(.ant-timeline) {
    padding: 16px;
}

:deep(.ant-descriptions) {
    margin-bottom: 16px;
}

/* 隐藏滚动条但保持功能 */
:deep(.ant-collapse-content-box) {
    overflow-x: hidden;
}

:deep(.ant-descriptions-view) {
    overflow-x: hidden;
}
</style> 